<template>
	<base-page>
		<view class="uni-flex uni-row page-height" @click="restoreFocus">
			<view class="common-wrap left-wrap" style="flex: 1;">
				<view class="header-box">
					<view class="order-time">
						<view class="title">消费时间</view>
						<uni-datetime-picker v-model="orderData.create_time" type="datetime" :clearIcon="false" />
					</view>

					<view class="header" v-if="memberInfo"
						:style="'background-image:url(' + $util.img('public/uniapp/cashier/member-bg.png') + ');background-repeat: no-repeat;'">
						<view class="headimg" @click="showMember">
							<image class="header-image"
								:src="memberInfo.headimg ? $util.img(memberInfo.headimg) : $util.img(defaultImg.head)"
								@error="memberInfo.headimg = defaultImg.head"></image>
						</view>

						<view class="head-info" @click="showMember">
							<view class="head-info-top">
								<view class="name">
									<view class="text">{{ memberInfo.nickname }}</view>
									<view class="level" v-if="memberInfo.member_level">
										{{ memberInfo.member_level_name }}
									</view>
								</view>
								<view class="mobile">{{ memberInfo.mobile }}</view>
							</view>
							<view class="head-info-bottom">
								<view>积分：{{ memberInfo.point }}</view>
								<view>
									余额：{{ (parseFloat(memberInfo.balance_money) + parseFloat(memberInfo.balance)) | moneyFormat }}
								</view>
							</view>
						</view>

						<button class="switch primary-btn" @click="openMember()">更换会员 [M]</button>
						<button class="switch primary-btn" @click="replaceMember()">散客</button>
					</view>
					<view class="header" v-else
						:style="'background-image:url(' + $util.img('public/uniapp/cashier/member-bg.png') + ');background-repeat: no-repeat;'">
						<view class="headimg">
							<image class="header-image" :src="$util.img(defaultImg.head)"></image>
						</view>
						<view class="head-info">
							<view class="name">散客</view>
						</view>
						<button class="switch primary-btn" @click="openMember()">查询会员 [M]</button>
					</view>
				</view>
				<view class="content">
					<view class="title">
						<view>
							结算清单（
							<text>{{ orderData.goods_num.toFixed(2) }}</text>
							）
						</view>
						<view class="clear" @click="clearGoods">
							<text class="iconfont iconqingchushujuku"></text>
							<text>清空</text>
						</view>
					</view>
					<view class="content-list common-scrollbar">
						<block v-if="orderData.goods_list.length && Object.keys(goodsData).length">
							<view class="content-head">
								<view>商品信息</view>
								<view class="center">小计</view>
								<view class="right">数量/重量</view>
							</view>
							<view class="content-item settlement-select-focus"
								:class="{ 'focus' : leftIndexFocus == index }" v-for="(item, index) in orderData.goods_list"
								:key="index" @click="callBox(item)" tabindex="0" :data-tab-index="index">
								<view class="item-img">
									<image :src="$util.img(item.goods_image.split(',')[0], { size: 'small' })"
										mode="widthFix"
										@error="item.goods_image = $util.img('public/uniapp/default_img/goods.png')">
									</image>
								</view>
								<view class="uni-flex uni-column flex-1 info-wrap">
									<view class="uni-flex">
										<view class="item-name">{{ item.sku_name }}</view>
										<view class="item-del" @click.stop="deleteGoods(item)">删除</view>
									</view>
									<view class="uni-flex items-flex-end">
										<view class="item-info">
											<view class="item-spe">{{ item.spec_name }}</view>
											<view class="card-name"
												v-if="item.card_item_id && goodsData['sku_name' + item.sku_id + 'item_id' + item.card_item_id]">
												使用卡项：{{ goodsData['sku_name' + item.sku_id + 'item_id' + item.card_item_id].card_name }}
											</view>
											<view class="item-price">
												<text class="member-price" v-if="item.is_member_price">Svip</text>
												<text class="unit">￥</text>
												{{ item.price | moneyFormat }}
											</view>
										</view>

										<view class="item-subtotal">
											<view>
												<text class="unit">￥</text>
												{{ item.goods_money | moneyFormat }}
											</view>
										</view>

										<view class="item-num" v-if="item.pricing_type == 'num'">
											<view class="num-dec" @click.stop="dec(item)">-</view>
											<view class="num"
												v-if="item.card_item_id && goodsData['sku_' + item.sku_id + 'item_id' + item.card_item_id]">
												{{ goodsData['sku_' + item.sku_id + 'item_id' + item.card_item_id].num }}
											</view>
											<view class="num" v-else-if="goodsData['sku_' + item.sku_id]">
												{{ goodsData['sku_' + item.sku_id].num }}
											</view>
											<view class="num" v-else>{{ item.num }}</view>
											<view class="num-inc" @click.stop="inc(item)">+</view>
										</view>
										<view class="item-num weight"
											v-if="item.goods_class == 6 && item.pricing_type == 'weight'">
											<view class="num"
												v-if="item.card_item_id && goodsData['sku_' + item.sku_id + 'item_id' + item.card_item_id]">
												{{ goodsData['sku_' + item.sku_id + 'item_id' + item.card_item_id].num }}
											</view>
											<view class="num" v-else-if="goodsData['sku_' + item.sku_id]">
												{{ goodsData['sku_' + item.sku_id].num }}
											</view>
											<view class="num" v-else>{{ item.num }}</view>
											<view>{{item.unit}}</view>
										</view>
									</view>

									<view class="card-deduction"
										v-if="item.card_info && Object.keys(item.card_info).length">
										卡项抵扣：{{ item.card_info.goods_name }}抵扣￥{{ item.num * item.goods_money }}({{ item.num }}次)
									</view>

								</view>

							</view>
						</block>
						<block v-else>
							<view class="empty">
								<image :src="$util.img('public/uniapp/cashier/cart_empty.png')" mode="widthFix"></image>
								<view class="tips">点击右侧商品，选择商品进行结账</view>
							</view>
						</block>
					</view>
				</view>

				<view class="bottom">
					<view class="bottom-info">
						<view class="bottom-left">
							共
							<text>{{ orderData.goods_num.toFixed(2) }}</text>
							件
						</view>
						<view class="bottom-right"></view>
					</view>
					<view class="bottom-btn">
						<text class="pay-money">￥{{ orderData.pay_money | moneyFormat }}</text>
						<button class="primary-btn btn-right" :disabled="orderData.goods_num == 0" @click="pay('')">结账
							[Enter]</button>
					</view>
				</view>
				<view class="pay-shade" v-show="type == 'pay'"></view>
			</view>
			<view class="uni-flex uni-row common-wrap" style="flex: 2;">
				<view class="comp-wrap" v-show="type != 'pay'">
					<button class=" comp-btn" :class="type == 'goods' ? 'primary-btn' : 'default-btn'"
						@click="type = 'goods'">商品 [F2]</button>
					<button class=" comp-btn" :class="type == 'member' ? 'primary-btn' : 'default-btn'"
						@click="showMember">会员 [F4]</button>
					<button class="comp-btn" :class="type == 'card' ? 'primary-btn' : 'default-btn'"
						@click="showMemberCard">会员卡项 [F5]</button>

					<button class="default-btn comp-btn" @click="wholeOrderCancel()">整单取消 [F12]</button>
					<view class="tag-parent">
						<button class="comp-btn" :class="type == 'order' ? 'primary-btn' : 'default-btn'"
							@click="hangingOrder">挂/取单 [F3]</button>
						<text class="num-tag" v-if="orderNum > 0">{{ orderNum < 100 ? orderNum : '99+' }}</text>
					</view>
					<button class="default-btn comp-btn" @click="openCashBox()">打开钱箱 [Alt+X]</button>
				</view>

				<view class="list-wrap" style="flex: 1;">

					<!-- 商品 -->
					<view class="content" v-show="type == 'goods'">
						<nc-goods @select="selectGoods" @active="activeGoods" :goods-ids="goodsIds"
							:indexFocus="rightIndexFocus" ref="goods"></nc-goods>
					</view>

					<!-- 会员 -->
					<view class="content" v-show="type == 'member'">
						<nc-member-detail v-if="memberInfo" ref="memberDetail"
							:member-id="memberInfo.member_id"></nc-member-detail>
					</view>

					<!-- 会员卡项 -->
					<view class="content" v-show="type == 'card'">
						<nc-member ref="member" @selectGoods="selectMemberGoods"></nc-member>
					</view>

					<!-- 提单 -->
					<view v-show="type == 'order'">
						<nc-pend-order ref="order" @takeorder="takeorder"></nc-pend-order>
					</view>

					<view class="content payment-content" v-show="type == 'pay'">
						<nc-payment ref="payment" :pay-money="orderData.pay_money" @cancel="cancelPayment"
							@success="paySuccess" :out-trade-no="outTradeNo" @active="activePayment"></nc-payment>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="remarkPopup" type="center">
			<view class="remark-wrap">
				<view class="header">
					<text class="title">备注</text>
					<text class="iconfont iconguanbi1" @click="$refs.remarkPopup.close()"></text>
				</view>
				<view class="body"><textarea v-model="remark" placeholder="填写备注信息"
						placeholder-class="placeholder-class" /></view>
				<view class="footer"><button type="default" class="primary-btn" @click="remarkConfirm">确认</button>
				</view>
			</view>
			<u-icon name="arrow-down"></u-icon>
		</uni-popup>

		<nc-select-member ref="selectMember"></nc-select-member>
	</base-page>
</template>

<script>
	import billing from './public/js/billing.js';
	import ncSelectMember from '@/components/nc-select-member/nc-select-member.vue';
	import ncMemberDetail from '@/components/nc-member-detail/nc-member-detail.vue';
	export default {
		components: {
			ncSelectMember,
			ncMemberDetail
		},
		onLoad() {
			uni.hideTabBar({});
		},
		data() {
			return {
				memberList: []
			};
		},
		mixins: [billing]
	};
</script>

<style scoped lang="scss">
	@import './public/css/index.scss';
</style>
<style>
	.header-box>>>.uni-select-lay-select {
		padding-right: 0.1rem !important;
	}

	.header-box>>>.uni-select-lay-icon {
		display: none !important;
	}

	.header-box>>>.uni-select-lay-input-close {
		display: none !important;
	}
</style>